<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FLIP动画</title>
  </head>
  <body>
    <button onclick="sort()">排序</button>
    <ul>
      <li id="first">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <script>
      function sort() {
        const ul = document.querySelector('ul');
        const first_dom = document.getElementById('first');
        const start = first_dom.getBoundingClientRect().top;
        ul.appendChild(first_dom);
        /**
         * 走到这的时候，因为JS占用这主进程，所以浏览器是不会先渲染的
         * 但是你这个时候获取dom的位置，还是能获取到更新后的位置的
         * **/
        const end = first_dom.getBoundingClientRect().top;
        const trans = start - end - 20;
        first_dom.style.transform = `translateY(${trans}px)`;
        /**
         * 在执行完上面的代码后，浏览器会先进行重绘
         *
         * requestAnimateFrame 是在浏览器下次重绘（下一帧重绘）之前触发
         * 下次重绘表示上面的代码已经绘制出来了，下面这个是在下一次重绘
         * **/
        requestAnimationFrame(() => {
          first_dom.style.transition = 'all 1s';
          first_dom.style.removeProperty('transform');
          console.log('play');
        });
      }

      function deplou(num) {
        const start = Date.now();
        while (Date.now() - start < num) {}
      }
    </script>
  </body>
</html>
